<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-toolbar che-title="New Factory From"></che-toolbar>

<md-content md-scroll-y flex md-theme="default">
  <md-progress-linear md-mode="indeterminate" class="create-factory-progress"
                      ng-show="createFactoryCtrl.isLoading"></md-progress-linear>
  <div class="create-factory" ng-hide="createFactoryCtrl.isLoading">
    <ng-form name="factoryNameForm">
      <!-- Name -->
      <che-input-box ng-init="createFactoryCtrl.setForm(factoryNameForm)"
                     che-label-name="Name"
                     che-form="factoryNameForm"
                     che-name="name"
                     che-place-holder="Name of the factory"
                     aria-label="Name of the factory"
                     ng-model="createFactoryCtrl.name"
                     ng-trim
                     ng-minlength="3"
                     ng-maxlength="20"
                     ng-pattern="/^[ A-Za-z0-9_\-\.]+$/"
                     id="new-factory-name-input"
                     unique-factory-name="">
        <div ng-message="pattern">Factory name may contain digits, latin letters, spaces, _ , . , - and should start only with digits, latin letters or underscores</div>
        <div ng-message="minlength">The name has to be more than 3 characters long.</div>
        <div ng-message="maxlength">The name has to be less than 20 characters long.</div>
        <div ng-message="uniqueFactoryName">This factory name is already used.</div>
      </che-input-box>
    </ng-form>
      <!--Factory source-->
      <che-label-container che-label-name="Source"
                           class="che-label-container-last">
        <md-tabs md-dynamic-height="true" md-stretch-tabs="auto" md-center-tabs="false" md-selected="selectedIndex"
                 md-border-bottom="true"
                 md-no-ink-bar
                 class="factory-select-source-details">
          <md-tab md-on-select="createFactoryCtrl.clearFactoryContent()">
            <md-tab-label>
              <span class="che-tab-label-title" id="new-factory-workspace-tab">Workspace</span>
            </md-tab-label>
            <md-tab-body>
              <cdvy-factory-from-workspace cdvy-factory-content="createFactoryCtrl.factoryContent"
                                           cdvy-is-loading="createFactoryCtrl.isLoading"
                                           cdvy-is-importing="createFactoryCtrl.isImporting"></cdvy-factory-from-workspace>
            </md-tab-body>
          </md-tab>
          <md-tab md-on-select="createFactoryCtrl.clearFactoryContent()">
            <md-tab-label>
              <span class="che-tab-label-title" id="new-factory-git-tab">Git</span>
            </md-tab-label>
            <md-tab-body>
              <div layout="row" layout-align="start center" class="create-factory-git-content">
                <cdvy-create-factory-git cdvy-git-location="createFactoryCtrl.gitLocation" layout-fill
                                         layout-align="start start"></cdvy-create-factory-git>
              </div>
            </md-tab-body>
          </md-tab>
          <md-tab md-on-select="createFactoryCtrl.clearFactoryContent()">
            <md-tab-label>
              <span class="che-tab-label-title" id="new-factory-config-tab">Config</span>
            </md-tab-label>
            <md-tab-body>
              <div layout-fill layout="row" layout-align="start center">
                <cdvy-factory-from-file cdvy-factory-content="createFactoryCtrl.factoryContent"
                                        cdvy-is-importing="createFactoryCtrl.isImporting" layout="column"
                                        flex></cdvy-factory-from-file>
              </div>
            </md-tab-body>
          </md-tab>
          <md-tab md-on-select="createFactoryCtrl.clearFactoryContent(); templateSelected = true;"
                  md-on-deselect="templateSelected = false;">
            <md-tab-label>
              <span class="che-tab-label-title" id="new-factory-template-tab">Template</span>
            </md-tab-label>
            <md-tab-body>
              <div layout-fill layout="row" layout-align="start center" ng-if="templateSelected">
                <che-factory-from-template factory-content="createFactoryCtrl.factoryContent"
                                           is-importing="createFactoryCtrl.isImporting" layout="column"
                                           editor-state="createFactoryCtrl.editorState"
                                           flex></che-factory-from-template>
              </div>
            </md-tab-body>
          </md-tab>
        </md-tabs>
      </che-label-container>

      <!--button 'Create'-->
      <che-button-primary id="create-factory-next-button"
                          che-button-title="Create"
                          ng-click="createFactoryCtrl.createFactoryByContent(createFactoryCtrl.factoryContent)"
                          ng-disabled="createFactoryCtrl.isFormInvalid() || !createFactoryCtrl.factoryContent || createFactoryCtrl.isImporting || (!!createFactoryCtrl.editorState && !createFactoryCtrl.editorState.isValid)"></che-button-primary>

  </div>
</md-content>
